{% extends 'base.html' %}
{% from "_formhelpers.html" import render_field %}

{% block title %}Wunjo{% endblock %}

{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/awesomplete.min.css') }}">
<script src="{{ url_for('static', filename='basic/js/awesomplete.min.js') }}"></script>
{% endblock %}

{% block body %}
<body class="bg-dark-background min-h-screen font-sans text-regular-mobile lg:text-regular lg:w-[calc(100%-var(--scrollbar-thickness)] pt-[var(--navbar-top-mobile)] md:pt-[var(--navbar-top)] transition-[padding-top]">
    <div class="ml-3 invert-on-touchscreen absolute top-2 left-2 font-normal gap-0 flex items-center justify-center">
        <input style="color: #ffffff;background: #221d21" class="w-24 translation-input text-center disabled:cursor-not-allowed rounded-lg transition-colors px-3 py-2.5 !font-bold text-m-mobile lg:text-m uppercase z-[9999]" value="{% if get_locale() == 'ru' %}Русский{% elif get_locale() == 'zh' %}中文{% elif get_locale() == 'ko' %}한국어{% elif get_locale() == 'es' %}Español{% else %}English{% endif %}">
    </div>
    <main class="flex items-center">
        <div class="flex-1 flex max-lg:flex-col-reverse w-full lg:h-screen">
            <div class="flex flex-col items-center gap-8 basis-7/12 lg:h-full px-6 lg:px-14 xl:px-16 py-14 bg-accent-primary justify-center">
                <div class="flex flex-col flex-1"></div>
                <div class="flex flex-col flex-1 justify-center gap-8 items-center">
                    <a>
                        <div class="cursor-pointer px-1.5 font-extrabold font-alumni text-black text-heading-1-mobile lg:text-heading-1">Wunjo</div>
                    </a>
                    <div class="relative">
                        <video style="box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;transform: scale(1.01);transform-origin: center;object-position: center;width: 99%;height: 100%;" class="rounded-[10px] w-auto max-h-[360px] h-auto object-cover" autoplay="" loop="" muted="" poster="" playsinline="">
                            <source src="{{ host }}/media/login/title.mp4" type="video/mp4">
                            <source src="{{ host }}/media/login/title.webm" type="video/webm">
                        </video>
                        <div class="absolute bottom-2 right-2 flex flex-col gap-2">
                            <button onclick="switchSound(this);" class="rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-1.5 gap-1.5 py-1.5 hover:bg-dark-elements-hover text-light-primary bg-dark-elements">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="h-4"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.85" stroke-width="1.5" d="m14.667 6-4 4m0-4 4 4M7.333 3.333 4 6H1.333v4H4l3.333 2.667V3.333Z"></path></svg>
                            </button>
                        </div>
                    </div>
                    <p class="text-subtitle-mobile lg:text-subtitle text-center mx-auto text-dark-background">{{ _('New features alert! Soon!') }}</p>
                </div>
                <div class="flex flex-col justify-end flex-1">
                    <p class="text-s-mobile lg:text-s text-center mx-auto text-dark-background mt-auto">{{ _('To learn more project, check out') }} <!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/playlist?list=PLJG0sD6007zFJyV78mkU-KW2UxbirgTGr">{{ _('YouTube channel') }}</a>.
                        <br>{{ _('We’re') }}<!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://boosty.to/wunjo">{{ _('looking') }}</a> <!-- -->
                        {{ _('for different support!') }}
                    </p>
                </div>
            </div>
            <div class="flex flex-col justify-start items-center max-lg:justify-center xl:px-20 lg:px-14 py-6 lg:py-8 max-lg:px-4 flex-1 min-h-screen">
                <div class="flex flex-col flex-1"></div>
                <div class="fixed top-0 left-0 right-0 bottom-0 view-dark-background opacity-[.85]" style="z-index:-1;"></div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start max-lg:py-32">
                    <div class="flex-1 flex flex-col w-full justify-center gap-7 max-w-xs text-white">
                        <input type="hidden" name="$ACTION_ID_">
                        <div class="flex flex-col gap-2.5">
                            <h1 style="{% if get_locale() == 'zh' or get_locale() == 'ko' %}line-height: 3.25rem;{% else %}{% endif %}" class="text-heading-1-mobile lg:text-heading-1 uppercase text-accent-primary !font-[1000] font-alumni">{{ _('Ready to use Wunjo v2?') }}</h1>
                        </div>
                        <div class="flex flex-col gap-5">
                            <form method="POST" class="flex flex-col gap-3">
                                <button class="rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 flex items-center justify-center gap-2 !bg-white hover:!bg-accent-hover hover:bg-accent-hover text-dark-background bg-accent-primary" type="submit">
                                    <span class="text-dark-background text-m-mobile lg:text-m font-extra-thick">{{ _('Let’s Go!') }}</span>
                                </button>
                            </form>
                        </div>
                        <p class="text-s text-light-secondary">{{ _('By signing in, you are agreeing to the') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/eula">{{ _('End-User License Agreement') }}</a>
                            <!-- -->{{ _('and') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/privacy-policy">{{ _('Privacy Policy') }}</a>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start">
                    <div class="flex items-center gap-5 text-s-mobile lg:text-s text-light-secondary font-light mt-auto">
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://github.com/wladradchenko">GitHub</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://t.me/wladblog">Telegram</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://wladradchenko.ru">{{ _('Author') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        const host = {{ host|tojson|safe }};
    </script>

    <script>
        function switchSound(btn) {
            // Find the <video> element relative to the provided element
            const btnDiv = btn.parentElement;
            const teaserDiv = btnDiv.parentElement;
            const teaser = teaserDiv.querySelector('video');

            if (teaser) {
                // Toggle the muted state of the <video> element
                teaser.muted = !teaser.muted;
                // Optionally, update the button text/icon based on the muted state
                if (teaser.muted) {
                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="h-4"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.85" stroke-width="1.5" d="m14.667 6-4 4m0-4 4 4M7.333 3.333 4 6H1.333v4H4l3.333 2.667V3.333Z"></path></svg>';
                } else {
                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none" class="h-4"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.85" stroke-width="1.5" d="M10.36 3.64a3.333 3.333 0 0 1 0 4.713m2.353-7.066a6.667 6.667 0 0 1 0 9.426m-5.38-9.38L4 4H1.333v4H4l3.333 2.667V1.333Z"></path></svg>';
                }
            }
        }
    </script>

    <script src="{{ url_for('static', filename='basic/js/translation.min.js') }}" async></script>
    <script>
        window.addEventListener('load', function() {
            initTranslationInputLogical();
        });
    </script>

</body>
{% endblock %}
